<template>
  <div>
    <div safe-area-inset-top>
      <van-row
        type="flex"
        justify="space-between"
        align="center"
        class="page-header"
      >
        <van-col class="page-header-left">
          <h2 class="page-title">{{ $t('nav.exchange') }}</h2>
        </van-col>
      </van-row>
    </div>
    <van-tabs
      v-model="active"
      swipeable
      animated
      sticky
    >
      <van-tab
        v-for="item in platform"
        :key="item.name"
      >
        <template #title>{{ $t(item.label) }}</template>
        <template v-if="account">
          <div class="amount">{{ $t('balance') }} {{ Number(account['USDT'] || 0) | numberFormat(8) }} USDT</div>
        </template>
        <template v-else>
          <div class="amount">
            <p>{{ $t('balance') }} {{ Number(account['USDT'] || 0) | numberFormat(8) }} USDT, {{ $t('not') }}</p>
            <navigator url="/authorize">{{ $t('add') }}</navigator>
          </div>
        </template>
        <assets-list :platform="item.label"></assets-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import assetsList from './components/assetsList'
export default {
  // layout: 'navigation',
  // i18n: {
  //   messages: {
  //     zh: {
  //       not: '您还未添加该平台的API',
  //       add: '立即添加',
  //       balance: '账户余额'
  //     },
  //     en: {
  //       not: 'You have not added the platform\'s API',
  //       add: 'Add Now',
  //       balance: 'Balance'
  //     }
  //   }
  // },
  components: {
    assetsList
  },
  data () {
    return {
      active: 0,
      account: ''
    }
  },
  computed: {
    ...mapState({
      platform: ({ robot }) => robot.platform
    })
  },
  watch: {
    active ({detail:{index}}) {
      this.account = ''
      this.apiAccountBalance({ platform: this.platform[index].label }).then((res) => {
        this.account = res.data.free
      })
    }
  },
  mounted() {
    this.apiAccountBalance({ platform: this.platform[0].label }).then((res) => {
      this.account = res.data.free
    })
  },
  methods: {
    ...mapActions({
      apiAccountBalance: 'authorize/apiAccountBalance'
    })
  }
}
</script>

<style lang="less" scoped>
.page-header {
  background-color: #fff;
  height: 46px;
  padding: 0 15px;
  &-right .van-icon {
    display: inline-block;
    vertical-align: middle;
  }
  &-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    color: #333333;
  }
}
.amount {
  background-color: #f8f8f8;
  padding: 0 15px;
  height: 36px;
  font-size: 12px;
  display: flex;
  align-items: center;justify-content: space-between;
}
</style>
